// 获取设备像素比
var dpr = window.devicePixelRatio
// 设置scale(缩放)比例根据dpr改变
var scale = 1 / dpr
// 获取viewport
var viewport = document.querySelector('meta[name="viewport"]')
// 动态设置viewport
viewport.setAttribute(
    "content",
    "width=device-width" +
    ",initial-scale=" +
    scale +
    ",maximum-scale=" +
    scale +
    ",minimum-scale=" +
    scale +
    ",user-scalable=no"
)

/* 注意事项
1.viewport标签支队移动端浏览器有效，对pc端浏览器无效。

2.当缩放比例为100%的时候，逻辑像素=css像素，理想视口宽度=布局视口宽度

3.单独设置inital-scale或者width都会有兼容性问题，所以设置布局视口为理想视口的最佳办法就是同时设置这两个属性

4.即是设置了user-scalable=0,在在Android Chrome(安卓)浏览器中也可以强制开启缩放
*/


// 设置 1rem=逻辑像素(也就是设备独立像素)/10 方便计算
function setRemUnit() {
    var rem = document.documentElement.clientWidth / 10
    // 375/10=37.5

    //获取html根元素
    var docEl = document.documentElement

    // 设置根元素字体大小
    /* docEl就是这里的html 单位是px */
    docEl.style.fontSize = rem + "px";
    console.log(docEl.style.fontSize);
}
// 监听页面大小变化并打印动态改变的font-size
window.addEventListener("resize", () => {
    setRemUnit()
})